
<!doctype html>
<html>
	<head>
		<title>test page template</title>
		<style>
			#demo {
				overflow:scroll;
				margin-top:5em;
			}
		
			.w { 
				width:5em;
				padding:1em;
				position:absolute;
				border: 1px solid black;
				z-index:5;				
			}
			.l { left:50px; }
			.r { left:650px; }
			.t { top:150px; }
			.m { top:250px; }
			.b { top:350px; }
			.bb { top:450px; }

			._jsPlumb_connector {
				z-index:4;
			}
			
			._jsPlumb_endpoint {
				z-index:6;
			}

			.dragHover { border:1px dotted red; }

			.lbl { z-index:50; background-color:white;}
			
		</style>
	</head>
	<body>
		<div id="demo">
		
			<div id="w1" class="w l t">w1</div>
			<div id="w2" class="w l m">w2</div>
			<div id="w3" class="w l b">w3</div>
			<div id="w4" class="w l bb">w4</div>
			<div id="w5" class="w r t">w5</div>
			<div id="w6" class="w r m">w6</div>
			<div id="w7" class="w r b">w7</div>
			<div id="w8" class="w r bb">w8</div>
				
		</div>
	
	 	<script type="text/javascript" src="../../js/lib/jquery-1.7.1-min.js"></script>
		<script type="text/javascript" src="../../js/lib/jquery-ui-1.8.16-min.js"></script>
		<script type="text/javascript" src="../../js/lib/jsBezier-0.4.js"></script>
		<!-- util -->
		<script type="text/javascript" src="../../js/1.4.0/jsPlumb-util-1.4.0-RC1.js"></script>
		<!-- main jsplumb engine -->
		<script type="text/javascript" src="../../js/1.4.0/jsPlumb-1.4.0-RC1.js"></script>
		<!-- connectors, endpoint and overlays  -->
		<script type="text/javascript" src="../../js/1.4.0/jsPlumb-defaults-1.4.0-RC1.js"></script>		
		<!-- state machine connectors -->
		<script type="text/javascript" src="../../js/1.4.0/jsPlumb-connectors-statemachine-1.4.0-RC1.js"></script>		
		<!-- SVG renderer -->
		<script type="text/javascript" src="../../js/1.4.0/jsPlumb-renderers-svg-1.4.0-RC1.js"></script>
		<!-- canvas renderer -->
		<script type="text/javascript" src="../../js/1.4.0/jsPlumb-renderers-canvas-1.4.0-RC1.js"></script>
		<!-- vml renderer -->
		<script type="text/javascript" src="../../js/1.4.0/jsPlumb-renderers-vml-1.4.0-RC1.js"></script>
		<!-- jquery jsPlumb adapter -->
		<script type="text/javascript" src="../../js/1.4.0/jquery.jsPlumb-1.4.0-RC1.js"></script>					            			
		
		<script>				
			jsPlumb.ready(function() {
				jsPlumb.importDefaults({
					Anchors:["RightMiddle", "LeftMiddle"],
					Endpoint:["Dot", {radius:4}],
					ConnectionOverlays:[
						[ "Arrow", { location:0.5 } ],
						[ "PlainArrow", { location:50 } ],
						[ "Diamond", { location:-50 } ],
						[ "Label", { label:"FOO", location:100, cssClass:"lbl" } ],
						[ "Label", { label:"BAR", location:-100, cssClass:"lbl" } ]
					]
				});

				jsPlumb.connect({source:"w1", target:"w5", connector:"Bezier"});
				jsPlumb.connect({source:"w2", target:"w6", connector:"Straight"});
				jsPlumb.connect({source:"w3", target:"w7", connector:"Flowchart"});
				jsPlumb.connect({source:"w4", target:"w8", connector:"StateMachine"});

				jsPlumb.connect({source:"w4", target:"w4", anchor:"Continuous", connector:"StateMachine"});
				
				jsPlumb.draggable($(".w"));
				
			});
		</script>
	</body>
</html>
